import React, { useState, useEffect } from 'react';
import styled from 'styled-components';

const PanelContainer = styled.div`
  display: flex;
  justify-content: center;
  gap: 60px;
  position: absolute;
  top: 25px;
  left: 0;
  right: 0;
  z-index: 5;
`;

const DataBox = styled.div`
  width: 140px;
  height: 140px;
  background: rgba(10, 25, 41, 0.7);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px;
  position: relative;
  
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.8), transparent);
  }
  
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.8));
  }
`;

const IconContainer = styled.div<{ color: string }>`
  width: 50px;
  height: 50px;
  background-color: ${props => props.color};
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  animation: glow 2s infinite;
  font-size: 24px;
`;

const DataValue = styled.div`
  font-size: 24px;
  font-weight: bold;
  color: white;
`;

const DataLabel = styled.div`
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 8px;
`;

interface DataItem {
  icon: string;
  initialValue: number;
  decreaseRate: number;
  currentValue: number;
  label: string;
  color: string;
}

const DataPanel: React.FC = () => {
  const [dataItems, setDataItems] = useState<DataItem[]>([
    { 
      icon: '📦', 
      initialValue: 34871, 
      decreaseRate: 1.2, 
      currentValue: 34871, 
      label: '当前库存', 
      color: '#1e4584' 
    },
    { 
      icon: '📄', 
      initialValue: 348710, 
      decreaseRate: 5.7, 
      currentValue: 348710, 
      label: '当前库存', 
      color: '#0e7a9a' 
    },
    { 
      icon: '📊', 
      initialValue: 348710, 
      decreaseRate: 4.3, 
      currentValue: 348710, 
      label: '当前库存', 
      color: '#b86e0d' 
    }
  ]);
  
  useEffect(() => {
    const timer = setInterval(() => {
      setDataItems(prevItems => 
        prevItems.map(item => ({
          ...item,
          currentValue: Math.max(0, Math.floor(item.currentValue - item.decreaseRate))
        }))
      );
    }, 100);
    
    return () => {
      clearInterval(timer);
    };
  }, []);
  
  return (
    <PanelContainer>
      {dataItems.map((item, index) => (
        <DataBox key={index}>
          <IconContainer color={item.color}>
            {item.icon}
          </IconContainer>
          <DataValue>{Math.floor(item.currentValue)}</DataValue>
          <DataLabel>{item.label}</DataLabel>
        </DataBox>
      ))}
    </PanelContainer>
  );
};

export default DataPanel; 